<template>
    <a-form :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" ref="formRef" @finish="handleFinish" :model="form">
        <a-row>
            <a-col :span="12">
                <a-form-item label="合同名称" name="name" :rules="[{ required: true }]">
                    <a-input :disabled="disabled" v-model:value="form.name" style="width: 100%" />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="合同编号" name="code" >
                    <a-input disabled v-model:value="form.code" style="width: 100%" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row>
          
            <a-col :span="12">
                <a-form-item label="项目名称" name="proName" :rules="[{ required: true }]">
                    <a-input-search :disabled="disabled" v-model:value="form.proName" style="width: 100%"
                        placeholder="选择的项目" @click="onSearch" @search="onSearch" />

                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="项目编号" name="proCode" :rules="[{ required: true }]">
                    <a-input disabled v-model:value="form.proCode" style="width: 100%" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row>
            <a-col :span="12">
                <a-form-item label="服务类型" name="serviceType" :rules="[{ required: true }]">
                    <a-select :getPopupContainer="trigger => trigger.parentNode" :disabled="disabled" v-model:value="form.serviceType" style="width:100%"
                        :options="serviceType">
                    </a-select>
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="负责人" name="directorName" :rules="[{ required: true }]">
                    <!-- <a-input :disabled="disabled"  v-model:value="form.director" style="width: 100%" /> -->
                    <a-input v-model:value="form.directorName" :disabled="disabled" @click="showUserSelect()"
                        style="width: 100%" placeholder="" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row>
            <a-col :span="12">
                <a-form-item label="供应商" name="supplierName" :rules="[{ required: true }]">
                    <!-- <a-input :disabled="disabled" v-model:value="form.serviceProvider" style="width: 100%" /> -->

                    <a-input :disabled="disabled" @click="onSupplier" v-model:value="form.supplierName"
                        style="width: 100%" />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="签订日期" name="contTime" :rules="[{ required: true }]">
                    <a-date-picker :getCalendarContainer="trigger => trigger.parentNode" valueFormat="YYYY-MM-DD hh:mm:ss" :disabled="disabled" v-model:value="form.contTime"
                        style="width: 100%" />

                </a-form-item>
            </a-col>
        </a-row>
        <a-row>
            <a-col :span="12">
                <a-form-item label="合同金额" name="amount" :rules="[{ required: true }]">
                    <a-input-number :precision="2" :min="0"  :disabled="disabled" v-model:value="form.amount"
                        style="width: 100%" />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="已付款金额" name="paidAmount"  v-if="form.paidAmount">
                    <a-input-number :precision="2" :min="0"  :disabled="disabled" v-model:value="form.paidAmount"
                        style="width: 100%" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row>
            <a-col :span="12">
                <a-form-item label="收票金额" name="receiptAmount" v-if="form.receiptAmount">
                    <a-input-number :precision="2" :min="0"  :disabled="disabled" v-model:value="form.receiptAmount"
                        style="width: 100%" :step="0.01" />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="核算金额" name="accountingAmount" v-if="form.accountingAmount">
                    <a-input-number :precision="2" :min="0"  :disabled="disabled" v-model:value="form.accountingAmount"
                        style="width: 100%" :step="0.01" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row>
            <a-col :span="12">
                <a-form-item label="合同审核稿" name="contractReviewDraft">
                    <fileUpload @uploadDone="uploadDone1" :isShow="disabled" :files="form.files1" ref="uploadRef1"
                        :type="1" :uploadNumber="4"></fileUpload>
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="合同正本" name="original">
                    <div>
                        <fileUpload @uploadDone="uploadDone2" :isShow="disabled" :files="form.files2" ref="uploadRef2"
                            :type="2" :uploadNumber="4"></fileUpload>
                    </div>
                </a-form-item>
            </a-col>
        </a-row>

        <a-row>
            <a-col :span="12">
                <a-form-item label="付款条件" name="payCond">
                    <a-textarea :disabled="disabled" v-model:value="form.payCond" style="width: 100%" />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="备注" name="remark">
                    <a-textarea :disabled="disabled" v-model:value="form.remark" style="width: 100%" />
                </a-form-item>
            </a-col>
        </a-row>
        <system :value="form"></system>
        <projectSelection ref="proSelect" @onClose="prSelectOk" :value="form.proSelectRecords" />
        <userSelectorPlus ref="userSelectorRef" @OnClose="userSelectorOk"></userSelectorPlus>
        <supplierSelection ref="supplierSelect" @onClose="supplierSelectOk" />
    </a-form>
</template>

<script setup>
import system from '@/components/Task/system.vue'
import api from '@/api/contract/other/index'
import projectSelection from '@/components/pm/projectSelection.vue'
import fileUpload from '@/components/JqUpload/index.vue'
import userSelectorPlus from '@/components/Selector/userSelectorPlusExtend.vue'
import { serviceType } from '@/utils/constants.js'
import supplierSelection from '@/components/pm/supplierSelection.vue'
const form = ref({
})
const formRef = ref()
const props = defineProps({
    value: {
        type: Object,
        default: () => { }
    },
    disabled: {
        type: Boolean,
        default: () => false
    }
})

watch(
    () => props.value,
    (newVal, oldVal) => {
        if (newVal) {
            form.value = { ...newVal }
            if (form.value) {
                form.value.files1 = form.value.files?.filter(x => x.type == 1)
                form.value.files2 = form.value.files?.filter(x => x.type == 2);//[{ type: 1, fileId: "11234", fileName: "11234.jpg" }]
            }
        }
    },
    { deep: true, immediate: true }
)

const userSelectorRef = ref()
const showUserSelect = () => {
    userSelectorRef.value.show("")
}
const userSelectorOk = (data) => {
    form.value.directorName = data.value.directorName
    form.value.director = data.value.directorId
}
const uploadDone1 = (result) => {
    console.log("uploadDone1", result)
    form.value.files1 = result
}
const uploadDone2 = (result) => {
    console.log("uploadDone2", result)
    form.value.files2 = result
}
const submit = () => {
    formRef.value.validate().then(() => {
        handleFinish(form.value)
    }).catch((err) => {

    });
}
const handleFinish = (values) => {
    console.log("handleFinish", values);
    values.files = (form.value.files1 ?? []).concat(form.value.files2 ?? [])
    if (!form.value.id) {
        api.add(values).then(() => {
            onClose(true);
        })
    } else {
        values.id = form.value.id;
        api.edit(values).then(() => {
            onClose(true);
        })
    }
};
const emits = defineEmits(['OnClose'])
const onClose = (refresh) => {
    emits('OnClose', refresh)
};
const show = (record) => {
    if (record) {
        form.value = { ...record }
        form.value.files1 = form.value.files?.filter(x => x.type == 1)
        form.value.files2 = form.value.files?.filter(x => x.type == 2);//[{ type: 1, fileId: "11234", fileName: "11234.jpg" }]
    } else { form.value = {} }
}
const test = () => {

}

const proSelect = ref()
const onSearch = () => {
    proSelect.value.show()
}
const prSelectOk = (selectedRowKeys, selectRecords) => {
    console.log("项目选择ok ", selectedRowKeys, selectRecords)
    form.value.proId = selectRecords[0].id
    form.value.proName = selectRecords[0].name
    form.value.proCode = selectRecords[0].code;

    form.value.proSelectRecords = selectRecords;
}

const getData = () => {
    return new Promise((resolve, reject) => {
        formRef.value.validate().then(() => {
            form.value.files = (form.value.files1 ?? []).concat(form.value.files2 ?? [])
            form.value.flowCode = "FLW_CONTRACT_OTHER"
            resolve(form.value)
        }).catch((err) => {
            reject(err)
        });
    })
}
// 重置
const resetForm = () => {
    formRef.value.resetFields()
}
defineExpose({
    getData,
    resetForm,
    show
})
const supplierSelect = ref()
const onSupplier = () => {
    supplierSelect.value.show()
}
const supplierSelectOk = (selectRecords) => {

    form.value.supplierId = selectRecords[0].id;
    form.value.supplierName = selectRecords[0].supplierEntity == 1 ? selectRecords[0].companyName : selectRecords[0].name;
    form.value.serviceProvider = form.value.supplierName
}
</script>
